<template>
  <div class="todoapp">
      <TodoHeader :list="showList" @add="proadd"></TodoHeader>
      <TodoMain :list="showList" @delval="delval"></TodoMain>
      <TodoFooter :list="showList"
       @changeType="typeFn"
      @clearIsSel="clearIs"
      ></TodoFooter>
  </div>
</template>

<script>
import './styles/base.css'
import './styles/index.css'

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  name: 'App',
  components:{
      TodoHeader,
      TodoMain,
      TodoFooter
  },
    data() {
    return {
      list: JSON.parse(localStorage.getItem('list') || '[]'),
      getSel:'all'
    }
  },
  methods: {
      proadd(valname){
        // 添加元素
        let id=this.list.length<0?100 : this.list[this.list.length-1].id+1
        this.list.push({
            id:id,
            name:valname,
            isDone:false
        })
      },
      delval(id){
        let index=this.list.findIndex(ele=>ele.id==id)
        // 根据索引删除对应数据
        this.list.splice(index,1)
      },
      typeFn(isSel){
          this.getSel=isSel
      },
      clearIs(){
        //   清除已完成
        console.log('父组件点击了');
        this.list=this.list.filter(ele=>!ele.isDone);
      }
  },
  computed:{
     showList(){
         if(this.getSel==='yes'){
             return this.list.filter(ele=>ele.isDone);
         }
          else if(this.getSel==='no'){
             return this.list.filter(ele=>!ele.isDone);
         }
         else{
             return this.list;
         }
     }
  },
  watch:{
      list:{
          deep:true,
          handler(list){
   localStorage.setItem('list',JSON.stringify(list))
          }
      
      }
  }
}
</script>

<style>

</style>
